<!doctype html>
<html lang="en">
  <head>
    <script type="module" crossorigin src="/frontend-mini-challenges/javascript/assets/index-BXVArR2Z.js"></script>
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-PAFhV-cJ.js">
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DIqzw3PH.js">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-Dkne97UN.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DAZPOirm.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/index-CxqeAJfC.css">
  </head>

  <body>
    <div class="container">
      <div class="bill-container">
        <div class="inside_left">
          <div class="input-container">
            <label for="amount">Bill</label>
            <div class="amount-container">
              <span>&#8377;</span>
              <input type="number" class="amount" name="amount" id="amount" autofocus />
            </div>
          </div>
          <div class="tip-container">
            <label>Select Tip</label>
            <div class="btn-tip">
              <button class="btn" disabled>5&#37;</button>
              <button class="btn" disabled>10&#37;</button>
              <button class="btn" disabled>15&#37;</button>
              <button class="btn" disabled>25&#37;</button>
              <button class="btn" disabled>50&#37;</button>
              <button class="btn" disabled>75&#37;</button>
            </div>
            <div class="customTip">
              <input type="number" id="customTip" placeholder="Custom Tip" disabled />
            </div>
          </div>
          <div class="people-container">
            <label>Number Of People</label>
            <input type="number" id="person" placeholder="No of people" disabled />
          </div>
          <button id="generate-bill" class="generate" disabled>Generate Bill</button>
        </div>
        <div class="inside_right">
          <div class="total-amount">
            <div class="tip-amount">
              <h4>Tip amount</h4>
              <span class="tipValue"></span>
            </div>
            <div class="total">
              <h4>Total</h4>
              <span class="totalValue"></span>
            </div>
            <div class="total">
              <h4>Each Person Bill</h4>
              <span class="bill"></span>
            </div>
          </div>
          <button id="reset" disabled>Reset</button>
        </div>
      </div>
    </div>
  </body>
</html>
